<template>
  <a-form-model ref="form" :model="formData" :rules="rules">
      <a-form-model-item
      label="新手机号"
      prop="newPhone"
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 18 }"
    >
      <a-input
        v-model="formData.newPhone"
        style="width: 210px"
        placeholder="请输入新手机号"
      />
    </a-form-model-item>
    <a-form-model-item
      label="确认密码"
      prop="password"
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 18 }"
    >
      <a-input-password
        v-model="formData.password"
        style="width: 210px"
        placeholder="请输入密码"
        allowClear
      />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import md5 from "js-md5";
import requests from "../js/requests.js";
import { FormModel, Input } from "ant-design-vue";
export default {
  name: "ChangePassword",
  components: {
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    AInputPassword: Input.Password,
    AInput: Input
  },
  data() {
    return {
      formData: {
        password: "",
        newPhone: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入密码！", trigger: "change" },
          { max: 100, message: "长度不能超过100个字符！", trigger: "change" },
        ],
        newPhone: [
          { required: true, message: "请输入新手机号！", trigger: "change" },
          { max: 32, message: "长度不能超过32个字符！", trigger: "change" },
          {
            pattern: new RegExp("^[^\\s]*$"),
            message: "不能包含空格",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.$on("submit", this.submit);
  },
  methods: {
    // 提交表单
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let tempFormData = new Object();
          tempFormData.password = md5(this.formData.password);
          tempFormData.newPhone = this.formData.newPhone;
          requests.updatePhone(tempFormData).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.$emit("getPhoneLoading", false);
              localStorage.removeItem("token");
              this.$router.push("/login")
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>